<template>
	<view class="content">
		<sin-signature style="width: 100%;" ref='signRef' :value="signUrl" @input="updateSignUrl"></sin-signature>
	</view>
</template>

<script>
import sinSignature from "./sin-signature-png"
export default {
	components: {
		sinSignature
	},
	data() {
		return {
			signUrl: '',
		}
	},
	async onLoad() {
	},
	methods: {
        // 更新签名URL - 将当前签名的base64存储到signUserList中
        async updateSignUrl(base64SignUrl) {
            console.log('更新', {
				base64SignUrl
			})
			this.signUrl = base64SignUrl
        },
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	width: 100%;
}

.image-container {
	margin-bottom: 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.image-title {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: bold;
}

.logo {
	max-width: 600rpx;
	/* 增加最大宽度 */
	max-height: 800rpx;
	/* 增加最大高度 */
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	object-fit: contain;
	/* 保持图片比例，完整显示 */
}

.rotated {
	/* 移除固定宽高，让图片自适应显示 */
	max-width: 800rpx;
	/* 旋转后的图片可能更宽 */
	max-height: 600rpx;
	/* 旋转后的图片可能更矮 */
	/* 旋转后的图片样式 */
	border-color: #007aff;
	object-fit: contain;
	/* 确保完整显示图片内容 */
}

.loading {
	width: 300rpx;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx dashed #ccc;
	border-radius: 8rpx;
	color: #999;
	font-size: 28rpx;
}

.hidden-canvas {
	position: fixed;
	top: -9999rpx;
	left: -9999rpx;
	/* Canvas尺寸将通过JavaScript动态设置 */
	min-width: 844rpx;
	/* 最小尺寸以支持图片处理 */
	min-height: 390rpx;
	opacity: 0;
	pointer-events: none;
	/* 确保不会影响页面交互 */
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
